import React, { useMemo } from "react";
import { useProducts } from "@/business.InterfaceLayer/hooks/store/useQueryStore/useQueryStore";
import useProductData from "@/business.InterfaceLayer/hooks/useProductData";
import useFilterProducts from "@/business.InterfaceLayer/hooks/useFilterProducts";
import useSortFilters from "@/business.InterfaceLayer/hooks/useSortFiltersQuery";
import MainLayout from "@/user.InterfaceLayer/Libraries/Layouts/Main.layout";
import Link from "next/link";
import { useTranslation } from "react-i18next";
import TextAtom from "@/user.InterfaceLayer/Libraries/UI_KIT/Atoms/Text.Atom";
import TextAtomEnum from "@/user.InterfaceLayer/Libraries/UI_KIT/Atoms/Text.Atom/enum";

interface CatalogRoleItems {
  link: string;
  title: string;
}

const CatalogPage: React.FC = () => {
  const { t } = useTranslation();
  const CatalogRole = useMemo(() => {
    return t("Catalog", {
      returnObjects: true,
    }) as CatalogRoleItems[];
  }, [t]);

  const { products: allProducts, isLoading } = useProducts();
  const { uniqueBrands, uniqueColors, maxPrice } = useProductData(allProducts);
  const { filters, applyFilters, clearFilters } = useSortFilters();
  const filteredProducts = useFilterProducts(allProducts);

  return (
    <MainLayout
      isLoading={isLoading}
      title={t("CatalogPage.title")}
      menuCategory={CatalogRole.map((e, index: number) => (
        <Link href={`${e.link}`} key={index}>
          <TextAtom
            type={TextAtomEnum.enum_h4}
            className="tracking-wide text-textColor font-bold uppercase"
          >
            {e.title}
          </TextAtom>
        </Link>
      ))}
      uniqueBrands={uniqueBrands}
      uniqueColors={uniqueColors}
      maxPrice={maxPrice}
      filters={filters}
      applyFilters={applyFilters}
      clearFilters={clearFilters}
      filteredProducts={filteredProducts}
    />
  );
};

export default CatalogPage;
